import React, { useEffect, useState, Key } from 'react'
import { Card, Button, Form, Input, Space, Table, Tooltip, message } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/lib/table'

// 引入路由中的编程式导航hook
import { useNavigate } from 'react-router-dom'

// 引入hospitalSet相关的接口和类型
import {
  IhospitalSetItem,
  hospitalSetsLsType,
} from '@api/hospital/model/hospitalSetTypes'
// 引入获取hospitalSets数据的方法
import {
  reqHospitalSets,
  reqDelHospitalSet,
  reqBatchDelHospitalSets,
} from '@api/hospital/hospitalSet'

export default function HospitalSet() {
  // const [isDisabled, setIsDisabeld] = useState(true)
  const [selectedKeys, setSelectedKeys] = useState<Key[]>([])
  // 使用useNavigate,得到一个可以修改路径navigate函数
  const navigate = useNavigate()
  // 控制表格加载数据时,展示loading
  const [loading, setLoading] = useState(false)
  // 注意: 使用useState时,利用泛型传入当前状态的类型
  const [hospitalSetsLs, setHospitalSetsLs] = useState<hospitalSetsLsType>([])

  // 定义分页的状态page,pageSize
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(10)

  // 使用Form组件的hook useForm.创建form实例. 此时这个form实例是一个没有和任何表单绑定的form实例,需要利用form实例和form表单进行绑定
  const [form] = Form.useForm()
  // 组件挂载,则立刻获取医院管理的数据
  useEffect(() => {
    getHospitalSets(page, pageSize)
  }, [])

  // 组件挂载和用户点击分页按钮,都调用这个函数
  async function getHospitalSets(page: number, pageSize: number) {
    // 获取hosname和hoscode
    const { hosname, hoscode } = form.getFieldsValue()

    //让loading展示
    setLoading(true)
    const result = await reqHospitalSets({
      page: page,
      limit: pageSize,
      hosname,
      hoscode,
    })

    // 由于分页的onchange也用了当前这个函数,所以当用户点击分页,要修改page和pageSize的值
    setPage(page)
    setPageSize(pageSize)
    // 根据响应数据,修改total和HospitalSetsLs,动态渲染表格
    setHospitalSetsLs(result.records)
    setTotal(result.total)

    // 让loading隐藏
    setLoading(false)
  }

  // 点击查询按钮触发
  const onFinish = () => {
    // console.log('Success:', values)
    getHospitalSets(page, pageSize)
  }

  // 清空按钮的事件处理函数
  const clearForm = () => {
    // 清空form表单里面的值
    form.resetFields()

    // 发送请求
    getHospitalSets(page, pageSize)
  }

  // 添加医院设置的事件处理函数
  const goHospitalAdd = () => {
    // 跳转到添加医院设置的页面
    navigate('/syt/hospital/hospitalSet/add')
  }

  // 删除一条医院设置
  const delHospitalSet = (id: string) => async () => {
    await reqDelHospitalSet(id)
    message.success('删除成功')
    getHospitalSets(page, pageSize)
  }

  // 批量删除医院设置
  const batchDelHospitalSets = async () => {
    // console.log(selectedRowKeys)
    // selectedKeys 就是要删除的数据的id数组
    //
    await reqBatchDelHospitalSets(selectedKeys)
    message.success('批量删除成功')
    getHospitalSets(page, pageSize)
    setSelectedKeys([])
  }

  const setBatchDelButton = (selectedRowKeys: Key[]) => {
    // 如果数组没有数据,则length为0 , 有数据则length大于0
    // 利用!,强制类型转成把0转成true. 把大于0的值转成false
    // setIsDisabeld(!selectedRowKeys.length)
    setSelectedKeys(selectedRowKeys)
  }

  const columns: ColumnsType<IhospitalSetItem> = [
    {
      // 决定了表格中,对应列表头的名称
      title: '序号',
      // 决定了这一列,渲染data数据中的哪一项
      // 以当前为例:表示Name这一列,渲染的是data数据中,每一个对象name属性的值
      // dataIndex: 'name',
      // 当某一列需要自定义渲染的内容时,可以使用render属性
      render: (text, record, index) => {
        // 此时打印的text和record都是当前data中的数据
        // index就是数据的下标
        // console.log(text, record, index)
        // render中返回什么,则这一列就渲染什么
        return index + 1
      },

      width: 70, // 控制这一列的宽度
      align: 'center', // 让一列的内容,居中显示
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人名称',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },

    {
      title: '操作',
      render: (data) => {
        return (
          <Space>
            <Tooltip title="修改医院">
              <Button
                icon={<EditOutlined />}
                type="primary"
                onClick={() => {
                  navigate('/syt/hospital/hospitalSet/edit/' + data.id)
                }}
              ></Button>
            </Tooltip>
            <Tooltip title="删除医院">
              <Button
                icon={<DeleteOutlined />}
                type="primary"
                danger
                onClick={delHospitalSet(data.id)}
              ></Button>
            </Tooltip>
          </Space>
        )
      },
      fixed: 'right', //让操作这一列,固定在表格的右侧
      width: 120,
      align: 'center',
    },
  ]

  return (
    <Card>
      <Space direction="vertical" size="large">
        {/* 通过Form组件的属性form,和刚才创建的form实例进行绑定. 绑定之后,form实例可以操作当前这个Form表单 */}
        <Form name="basic" onFinish={onFinish} layout="inline" form={form}>
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          <Form.Item>
            {/* 有htmlType="submit"的按钮,会触发Form的onFinish */}
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={clearForm}>清空</Button>
          </Form.Item>
        </Form>
        <Space>
          <Button type="primary" onClick={goHospitalAdd}>
            添加
          </Button>
          <Button
            disabled={!selectedKeys.length}
            type="primary"
            danger
            onClick={batchDelHospitalSets}
          >
            批量删除
          </Button>
        </Space>
        {/* columns: 决定了表格中有几列,每一列的标题和要渲染的数据是什么
        
            data: 决定了表格最终渲染的数据是什么 
            rowKey: 在列表渲染表格的时候,给每一个子元素添加的key 
            rowKey="id" 表示加的唯一值是data数据里面的id属性
        */}
      </Space>
      {/* 注意: 使用Table的scroll时,不要用Space包裹Table */}
      <Table
        loading={loading}
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={hospitalSetsLs}
        // 表格每一行加key,提高性能
        rowKey="id"
        // 表格支持滚动
        scroll={{ x: 1500 }}
        // 表格添加边框
        bordered
        // 控制分页的属性
        pagination={{
          // current的值是几,则对应的页码就会高亮
          current: page,
          // 表示一页有几条数据
          pageSize,
          // 表示总共有多少数据, pagination会自动根据数据总数,计算有多少页(默认一页十条)
          total,
          // 展示动态修改一页多少条数据的视图
          showSizeChanger: true,
          // 动态修改一页多少条的下拉框
          pageSizeOptions: ['2', '5', '10'],
          // 快速跳到指定页的视图
          showQuickJumper: true,
          showTotal: (total) => {
            return `总共${total}`
          },
          // 当页面切换或pageSize切换触发的回调函数
          onChange: getHospitalSets,
        }}
        rowSelection={{
          onChange: setBatchDelButton,
        }}
      />
    </Card>
  )
}
